﻿<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户登录</title>
    <!-- Bootstrap 核心 CSS 文件 -->

    <link href="./static/css/style.css" rel="stylesheet">
    <link href="./static/css/bootstrap.4.00.min.css" rel="stylesheet">
    <script src="./static/js/common.js"></script>



    <style>
        .container-fluid {
            display: table;
            height: 100%;
        }

        .row {
            display: table-cell;
            vertical-align: middle;
        }

        .el-button--primary {
            background-color: #12489e;
        }

        .login_icon {
            position: absolute;
            top: 10px;
            left: 9px;
            z-index: 99;
        }

        .login_btn {
            width: 65%;
            color: #fff;
            margin: 40px auto;
            display: block;
            background: #12489e;
        }
        .login_btn:hover {
            color: #fff;
            background: #4382e6;
        }
    </style>
</head>

<body id="login-body">
    <div class="container-fluid">
        <div class="row">

            <el-form class="lic-login-form lic-center-block" ref="loginForm" :model="loginForm" :rules="rules">
                <img class="lic-center-block lic-login-logo" src="static/images/logo.png" alt="">
                <div class="form-group lic-center-block">
                    <el-form-item prop="LoginName">
                        <img class="login_icon" src="./static/images/login_name_icon.png" alt="">
                        <el-input v-model="loginForm.LoginName" placeholder="用户名" prefix-icon="1" clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="Password">
                        <img class="login_icon" src="./static/images/login_psd_icon.png" alt="">
                        <el-input v-model="loginForm.Password" type="password" placeholder="密码" prefix-icon="1"
                            v-on:keyup.enter.native="submitForm('loginForm')" clearable></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button class="login_btn" type="region" v-on:click="submitForm('loginForm')">登录
                        </el-button>
                    </el-form-item>
                </div>


            </el-form>



        </div>
    </div>

    <script type="text/javascript">

        app = new Vue({
            el: '.container-fluid',
            data: {
                loginForm: {
                    LoginName: '',
                    Password: ''
                },
                rules: {
                    LoginName: [
                        verification.NotNull,
                        { pattern: verification.StringLengthAtoB.t.format(3, 20), message: verification.StringLengthAtoB.m.format(3, 20) }
                    ],
                    Password: [
                        verification.NotNull
                    ]
                }

            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                submitForm: function (formName) {
                    this.$refs[formName].validate(function (valid, _this) {
                        if (valid) {
                            console.log(app.loginForm);

                            myAjax("post", this, "/api/Account/Login", app.loginForm, function (response) {
                                window.location.href = "index.html";
                            });

                        } else {
                            app.$message({
                                message: '请确认提交内容！',
                                type: 'error'
                            });
                            return false;
                        }
                    });
                }
            }
        });
    </script>

</body>

</html>